<div id="typography-message-boxes" class="p-24">

    <div class="mat-title">Message Boxes</div>

    <div class="mat-card mat-elevation-z2 p-24" fxLayout="column">

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="message-box">
                    This is a standard message box
                </div>
            </div>

            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                            fxFlex="50">
                <textarea #source hidden="hidden">
                    <div class="message-box">
                        This is a standard message box
                    </div>
                </textarea>
            </fuse-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="message-box error">
                    This is an alert message box!
                </div>
            </div>

            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                            fxFlex="50">
                <textarea #source hidden="hidden">
                    <div class="message-box error">
                        This is an alert message box!
                    </div>
                </textarea>
            </fuse-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="message-box warning">
                    This is a warning message box
                </div>
            </div>

            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                            fxFlex="50">
                <textarea #source hidden="hidden">
                    <div class="message-box warning">
                        This is a warning message box!
                    </div>
                </textarea>
            </fuse-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="message-box success">
                    This is a success message box
                </div>
            </div>

            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                            fxFlex="50">
                <textarea #source hidden="hidden">
                    <div class="message-box success">
                        This is a success message box!
                    </div>
                </textarea>
            </fuse-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="message-box info">
                    This is a info message box
                </div>
            </div>

            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                            fxFlex="50">
                <textarea #source hidden="hidden">
                    <div class="message-box info">
                        This is a info message box!
                    </div>
                </textarea>
            </fuse-highlight>

        </div>


    </div>

</div>